<script setup lang="ts">
import {onMounted, ref} from 'vue'
import { useRouter } from 'vue-router'
import axios from "axios";

const router = useRouter()
const searchText = ref('')

// 历史搜索
const historySearches = ref([])
// 热门搜索
const hotSearches = ref([])
// 路径
const urlhost = "http://localhost:8082/aiades/"
// 查询历史记录
const findHistorySearches = () =>{
  axios.post(urlhost+"findhistory").then(res=>{
    historySearches.value = res.data;
  })
}
const findHotSearches = () =>{
  axios.post(urlhost+"findhot").then(res=>{
    hotSearches.value = res.data;
  })
}
const goBack = () => {
  router.back()
}

const clearSearch = () => {
  searchText.value = ''
}

const user = ref<Card[]>([])
// 搜索
const handleSearch = async () => {
  try {
    const response = await axios.get(`${urlhost}findsearch?searchText=${searchText.value}`)
    const searchData = response.data
    
    // 保存到 localStorage
    localStorage.setItem('aiades_data', JSON.stringify(searchData))
    
    // 跳转到结果页
    router.push('/search-result')
  } catch (error) {
    console.error('搜索失败:', error)
  }
}

// 点击历史搜索或热门搜索标签
const handleTagClick = (tagName: string) => {
  searchText.value = tagName;
  handleSearch();
}

interface Card {
  aidesid: number
  aidesName: string  //标题
  description: string //描述
  usertotal: number //用户使用次数
  aidesImg: string //图片地址
  classifyid: number | null//主分类外键
  createid:number | null//子分类外键
}
onMounted(()=>{
  findHistorySearches()
  findHotSearches()
});
</script>

<template>
  <div class="search-page">
    <!-- 顶部导航栏 -->
    <div class="nav-bar">
      <div class="back-btn" @click="goBack">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <path fill="currentColor" d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
        </svg>
      </div>
      <div class="title">搜索</div>
      <div class="placeholder"></div>
    </div>

    <!-- 搜索框 -->
    <div class="search-box">
      <div class="search-input-wrapper">
        <svg class="search-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <path fill="#999" d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
        </svg>
        <input
            v-model="searchText"
            type="text"
            placeholder="绘画"
            @keyup.enter="handleSearch"
        >
        <svg
            v-if="searchText"
            class="clear-icon"
            @click="clearSearch"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
        >
          <path fill="#999" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
        </svg>
      </div>
      <button class="search-btn" @click="handleSearch">搜索</button>
    </div>

    <!-- 搜索内容 -->
    <div class="search-content">
      <!-- 历史搜索 -->
      <div class="search-section">
        <div class="section-title">历史搜索</div>
        <div class="tag-list">
          <div
              v-for="(tag, index) in historySearches"
              :key="index"
              class="tag"
              @click="handleTagClick(tag.historyname)"
          >
            {{ tag.historyname }}
          </div>
        </div>
      </div>

      <!-- 热门搜索 -->
      <div class="search-section">
        <div class="section-title">热门搜索</div>
        <div class="tag-list">
          <div
              v-for="(tag, index) in hotSearches"
              :key="index"
              class="tag"
              @click="handleTagClick(tag.hotname)"
          >
            {{ tag.hotname }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.search-page {
  min-height: 100vh;
  background: white;
  padding-top: env(safe-area-inset-top);
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: linear-gradient(90deg, #f5a8f0 0%, #7ecfff 100%);
  color: white;
}

.back-btn {
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.title {
  font-size: 17px;
  font-weight: 500;
}

.placeholder {
  width: 24px;
}

.search-box {
  padding: 12px 16px;
  display: flex;
  gap: 12px;
  align-items: center;
  background: white;
}

.search-input-wrapper {
  flex: 1;
  height: 36px;
  background: #f5f5f5;
  border-radius: 18px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 8px;
}

.search-icon {
  width: 20px;
  height: 20px;
}

.clear-icon {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

input {
  flex: 1;
  border: none;
  background: none;
  font-size: 15px;
  color: #333;
}

input:focus {
  outline: none;
}

input::placeholder {
  color: #999;
}

.search-btn {
  color: #007AFF;
  font-size: 15px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.search-content {
  padding: 0 16px;
}

.search-section {
  margin-top: 24px;
}

.section-title {
  font-size: 15px;
  color: #333;
  margin-bottom: 12px;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  padding: 6px 12px;
  background: #f5f5f5;
  border-radius: 16px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
}

.tag:active {
  opacity: 0.7;
}
</style> 